<template>
  <div>
    <el-form ref="leaveForm" :model="form" label-width="80px">
      <el-form-item type="name" label="部门">
        <el-select v-model="value" placeholder="请选择活动区域" @change="holidayRuleByDepartId">
          <el-option v-for="item in departmentData" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <!-- 表格区 -->

      <el-table ref="holidayType" :data="stateData.type" style="width: 100%">
        <el-table-column prop="name" label="类型" width="200" />
        <el-table-column label="是否可用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isEnable"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </template>
        </el-table-column>
      </el-table>

      <div class="el-dialog__footer dialog-footer">
        <el-button type="primary" @click="onUpdata">保存更新</el-button>
        <el-button @click="btnCancel">取消</el-button>
      </div>
    </el-form>
    <!-- 按钮 -->
    <el-alert type="warning" show-icon :closable="false" title>
      <template>
        <div class="tipInfo">
          <p>事假 请假单位为0.5天 只能提交工作日内的请假单</p>
          <p>当请假开关关闭后，员工则不可在员工端提交请假申请</p>
        </div>
      </template>
    </el-alert>
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments'
import { holidayRuleByDepartId, leaveSave } from '@/api/attendances'
import attendanceApi from '@/api/constant/attendance'
export default {
  data() {
    return {
      deptID: [],
      form: {
        name: '',
        region: '',
        leaveType1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      value: '总裁办',
      stateData: {},
      departmentData: [],
      // 假期类型数据
      holidayType: [],
      // 请假类型转换
      tylelist: [],
      leaveBase: {
        departmentId: ''
      }
    }
  },

  created() {
    this.getDepartments()
    // this.holidayRuleByDepartId()// 自动展示总裁办数据
    this.stateData = attendanceApi
  },
  methods: {
    //   获取部门列表
    async getDepartments() {
      const { depts } = await getDepartments()
      this.departmentData = depts
    },
    // 根据部门 id 查询请假规则
    async holidayRuleByDepartId(val) {
      console.log(val)
      const fd = new FormData()
      fd.append('departmentId', val)
      const res = await holidayRuleByDepartId(fd)
      this.tylelist = res
      console.log(res)
      res.forEach(item => {
        if (item.isEnable === 0) {
          item.isEnable = true
        } else {
          item.isEnable = false
        }
        this.stateData.type.forEach(val => {
          if (val.leaveType === item.leaveType) {
            val.isEnable = item.isEnable
          }
        })
      })
    },

    async onUpdata() {
      // if (res) {
      console.log(this.tylelist)
      // console.log(...this.stateData.type)

      this.tylelist.forEach((item, index) => {
        this.stateData.type.forEach(i => {
          if (i.isEnable) {
            item.isEnable = '0'
          } else {
            item.isEnable = '1'
          }
        })
      })
      await leaveSave(this.tylelist)
      this.$message.success('操作成功')
      await this.btnCancel()
    },
    btnCancel() {
      this.$refs.leaveForm.resetFields()
      // 关闭弹窗
      this.$emit('update:showSetting', false)
    }
  }
}
</script>

<style>

</style>
